<template>
  <div class="registerinputs">
    <div class="registerinputs_items" v-if="type === 1">
      <CheckboxGroup :type="agreeType" :checkValue="agreeCheckValue">
        <span slot="checkboxgroupTitle"
          ><a
            :href="agreeUrl"
            class="registerinputs_items_agree"
            target="_blank"
            >{{ $t("lang.协议认可", { g: $t("lang.隐私协议") }) }}</a
          ></span
        >
        <div slot="checkboxGroupContent" slot-scope="{ isDisabled }">
          <van-divider>{{ $t("lang.开始第一步") }}</van-divider>
          <input
            type="text"
            v-model="userName"
            :placeholder="$t('lang.邮箱地址')"
            class="registerinputs_items_input"
            :class="userNameIsErr ? 'err' : ''"
            :disabled="isDisabled"
          />
          <span class="registerinputs_err" v-show="userNameIsErr">{{
            userNameErrMsg
          }}</span>
          <span class="registerinputs_items_tip">{{
            $t("lang.你可以收到来自我们的邮件，了解最新更新。")
          }}</span>
          <van-divider>{{ $t("lang.第二步") }}</van-divider>
          <div class="registerinputs_items_password">
            <input
              type="password"
              v-model="userPassword"
              :placeholder="$t('lang.登录密码')"
              class="registerinputs_items_input"
              :class="userPasswordIsErr ? 'err' : ''"
              :disabled="isDisabled"
            />
            <span class="registerinputs_err" v-show="userPasswordIsErr">{{
              userPasswordErrMsg
            }}</span>
            <input
              type="password"
              v-model="enterUserPassword"
              :placeholder="$t('lang.确认登录密码')"
              class="registerinputs_items_input"
              :class="enterUserPasswordIsErr ? 'err' : ''"
              :disabled="isDisabled"
            />
            <span class="registerinputs_err" v-show="enterUserPasswordIsErr">{{
              enterUserPasswordErrMsg
            }}</span>
          </div>
          <van-divider>{{ $t("lang.第三步") }}</van-divider>
          <button
            @click="registerClickHandle"
            class="registerinputs_items_submit"
            :class="!isSubmit ? 'disabled' : ''"
            :disabled="!isSubmit"
          >
            {{ $t("lang.注册") }}
          </button>
        </div>
      </CheckboxGroup>
      <p>
        {{ $t("lang.已有帐户") }}?<router-link
          :to="{ name: 'LOGIN', params: { bounce: $route.params.bounce } }"
          class="registerinputs_items_reg"
          >{{ $t("lang.登录") }}</router-link
        >
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "RegisterInput",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    type: Number,
    default() {
      return 1;
    },
  },
  components: {
    CheckboxGroup: () =>
      import(
        /* webpackChunkName:"checkboxGroup" */ "../../components/common/checkboxGroup.vue"
      ),
  },
  data() {
    return {
      userName: "",
      userPassword: "",
      userNameIsErr: false,
      userNameErrMsg: "",
      userPasswordIsErr: false,
      userPasswordErrMsg: "",
      enterUserPassword: "",
      enterUserPasswordIsErr: false,
      enterUserPasswordErrMsg: "",
      isSubmit: false,
      agreeType: 2,
      agreeCheckValue: false,
      agreeUrl: "",
    };
  },
  mounted() {},
  watch: {
    userName(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
    userPassword(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
    enterUserPassword(v) {
      if (this.boolFormData()) {
        this.isSubmit = true;
      } else {
        this.isSubmit = false;
      }
    },
  },
  methods: {
    boolFormData() {
      let usname = this.userName.replace(/^\s*|\s*$/, ""),
        uspass = this.userPassword.replace(/^\s*|\s*$/, ""),
        enterUsPass = this.enterUserPassword.replace(/^\s*|\s*$/, "");
      if (usname === "") {
        this.userNameIsErr = true;
        this.userNameErrMsg = this.$t("lang.登录名不能为空");
        return false;
      } else if (!/[a-z0-9]+\@[a-z0-9]+\.[a-z]{3,}/.test(usname)) {
        this.userNameIsErr = true;
        this.userNameErrMsg = this.$t("lang.登录名不是电子邮箱地址");
        return false;
      } else {
        this.userNameIsErr = false;
        this.userNameErrMsg = "";
      }
      if (uspass === "") {
        this.userPasswordIsErr = true;
        this.userPasswordErrMsg = this.$t("lang.登录密码不能为空");
        return false;
      } else if (!/^[A-Z]{1,1}.{5,}/.test(uspass)) {
        this.userPasswordIsErr = true;
        this.userPasswordErrMsg = this.$t(
          "lang.登录密码应以大写字母开头的6到8位格式"
        );
        return false;
      } else {
        this.userPasswordIsErr = false;
        this.userPasswordErrMsg = "";
      }
      if (enterUsPass === "") {
        this.enterUserPasswordIsErr = true;
        this.enterUserPasswordErrMsg = this.$t("lang.确认登录密码不能为空");
        return false;
      } else if (uspass !== enterUsPass) {
        this.enterUserPasswordIsErr = true;
        this.enterUserPasswordErrMsg = this.$t(
          "lang.登录密码与确认登录密码不同"
        );
        return false;
      } else {
        this.enterUserPasswordIsErr = false;
        this.enterUserPasswordErrMsg = "";
      }
      return true;
    },
    registerClickHandle(e) {
      if (this.boolFormData()) {
        console.log("ok");
        this.$route.params.bounce
          ? (location.href = decodeURIComponent(this.$route.params.bounce))
          : false;
      } else {
        console.log("err");
      }
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.registerinputs {
  .registerinputs_items {
    margin: 10 / @base auto;
    width: 300 / @base;
    .registerinputs_items_agree {
      color: #333;
    }
    .registerinputs_items_tip {
      display: block;
      color: #666;
      margin: 0 0 30 / @base 0;
    }
    .registerinputs_items_password {
    }
    input {
      &.registerinputs_items_input {
        display: block;
        margin: 10 / @base auto;
        width: 270 / @base;
        padding: 10 / @base 10 / @base;
        border: 1 / @base solid #ccc;
        border-radius: 5 / @base;
        &.err {
          border: 1 / @base solid red;
        }
      }
    }
    a {
      color: rgb(165, 42, 42);
      &.registerinputs_items_forgotpassword {
        display: block;
        text-align: right;
      }
      &.registerinputs_items_reg {
        display: inline-block;
        margin: 0 5 / @base;
      }
    }
    button {
      &.registerinputs_items_submit {
        display: block;
        width: 300 / @base;
        margin: 30 / @base 0 30 / @base 0;
        padding: 10 / @base 10 / @base;
        background-color: rgb(165, 42, 42);
        color: #fff;
        font-weight: 700;
        border: 0;
        border-radius: 5 / @base;
        &.disabled {
          background-color: rgba(165, 42, 42, 0.5);
          color: #fff;
        }
      }
    }
    .registerinputs_err {
      display: block;
      color: red;
    }
  }
}
</style>
